<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>花间村 - 订单详情</title>
    <link rel="stylesheet" href="{{ asset('css/wechat_service_account.css') }}">
    <style>
        .container {
            padding: 15px;
        }
        .header {
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .header h2 {
            margin: 0;
            color: #333;
            font-size: 20px;
        }
        .back-link {
            margin-top: 10px;
            padding: 10px 20px;
            background: #07C160;
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        .order-info {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .info-row:last-child {
            border-bottom: none;
        }
        .info-label {
            color: #666;
            font-size: 14px;
        }
        .info-value {
            color: #333;
            font-size: 14px;
            text-align: right;
        }
        .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin: 20px 0 15px 0;
        }
        .product-item {
            background: #fff;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        .product-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .product-name {
            font-size: 15px;
            color: #333;
            font-weight: 500;
        }
        .product-price {
            font-size: 14px;
            color: #e53e3e;
            font-weight: 500;
        }
        .product-details {
            padding: 10px 0;
        }
        .detail-row {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            font-size: 13px;
            color: #666;
        }
        .address-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .address-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 15px;
        }
        .address-detail {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }
        .address-name {
            font-weight: 500;
            color: #333;
        }
        /* 物流信息卡片样式 */
        .logistics-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #333;
        }
        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        .btn-primary {
            background: #07C160;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            font-weight: 500;
            margin-top: 10px;
        }
        .btn-secondary {
            background: #1890ff;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            margin-top: 10px;
        }
        .btn-primary:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .alert-success {
            background: #f0f9ff;
            border: 1px solid #07C160;
            border-radius: 4px;
            padding: 10px;
            color: #07C160;
            margin-bottom: 15px;
        }
        /* 扫描功能样式 */
        .scanner-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .scanner-content {
            width: 90%;
            max-width: 500px;
            background: white;
            border-radius: 10px;
            padding: 20px;
        }
        .scanner-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .scanner-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
        }
        .close-scanner {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
        }
        #scanner-video {
            width: 100%;
            height: 300px;
            background: #000;
            border-radius: 8px;
            object-fit: cover;
        }
        .scanner-instructions {
            text-align: center;
            color: #666;
            margin: 15px 0;
            font-size: 14px;
        }
        .scan-line {
            position: absolute;
            width: 100%;
            height: 2px;
            background: #07C160;
            animation: scan 2s infinite;
        }
        @keyframes scan {
            0% { top: 0; }
            50% { top: 100%; }
            100% { top: 0; }
        }
        .drawingBuffer {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h2>订单详情</h2>
            <a href="{{ route('wechat.service.account.admin') }}" class="back-link">返回管理面板</a>
        </div>

        @if(session('success'))
        <div class="alert-success">
            {{ session('success') }}
        </div>
        @endif

        <!-- 订单基本信息 -->
        <div class="order-info">
            <div class="info-row">
                <span class="info-label">订单编号:</span>
                <span class="info-value">{{ $order->order_number }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">订单状态:</span>
                <span class="info-value">{{ $order->status }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">订单总价:</span>
                <span class="info-value">¥{{ number_format($order->total_price, 2) }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">下单时间:</span>
                <span class="info-value">{{ $order->created_at->format('Y-m-d H:i:s') }}</span>
            </div>
            @if($order->updated_at)
            <div class="info-row">
                <span class="info-label">更新时间:</span>
                <span class="info-value">{{ $order->updated_at->format('Y-m-d H:i:s') }}</span>
            </div>
            @endif
        </div>

        <!-- 商品信息 -->
        <div class="section-title">商品信息</div>
        @foreach($order->items as $item)
        <div class="product-item">
            <div class="product-header">
                <div class="product-name">{{ $item->product_name }}</div>
                <div class="product-price">¥{{ number_format($item->price, 2) }}</div>
            </div>
            <div class="product-details">
                <div class="detail-row">
                    <span>数量:</span>
                    <span>{{ $item->quantity }}</span>
                </div>
                <div class="detail-row">
                    <span>小计:</span>
                    <span>¥{{ number_format($item->price * $item->quantity, 2) }}</span>
                </div>
                @if($item->variant_name)
                <div class="detail-row">
                    <span>规格:</span>
                    <span>{{ $item->variant_name }}</span>
                </div>
                @endif
            </div>
        </div>
        @endforeach

        <!-- 收货地址信息 -->
        <div class="section-title">收货地址</div>
        <div class="address-card">
            @if($order->shippingAddress)
            <div class="address-detail">
                <div class="address-name">{{ $order->shippingAddress->receiver_name }}</div>
                <div>电话: {{ $order->shippingAddress->receiver_phone }}</div>
                <div>地址: {{ $order->shippingAddress->receiver_address }}</div>
            </div>
            @else
            <div class="address-detail">
                <div class="address-name">{{ $order->receiver_name }}</div>
                <div>电话: {{ $order->receiver_phone }}</div>
                <div>地址: {{ $order->shipping_address }}</div>
            </div>
            @endif
        </div>

        <!-- 物流信息卡片 -->
        @if($order->status !== '已发货' && $order->status !== '已签收' && $order->status !== '已完成')
        <div class="section-title">物流信息</div>
        <div class="logistics-card">
            <form id="logisticsForm" action="{{ route('wechat.service.account.orders.ship', $order->id) }}" method="POST">
                @csrf
                <div class="form-group">
                    <label class="form-label" for="logistics_company">物流公司</label>
                    <input type="text" class="form-input" id="logistics_company" name="logistics_company" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="tracking_number">物流单号</label>
                    <input type="text" class="form-input" id="tracking_number" name="tracking_number" required>
                    <button type="button" class="btn-secondary" onclick="openScanner('tracking_number')">扫描单号</button>
                </div>
                <button type="button" class="btn-primary" onclick="confirmShipment()">确认发货</button>
            </form>
        </div>
        @else
        <div class="section-title">物流信息</div>
        <div class="logistics-card">
            <div class="info-row">
                <span class="info-label">物流公司:</span>
                <span class="info-value">{{ $order->logistics_company ?? '暂无' }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">物流单号:</span>
                <span class="info-value">{{ $order->tracking_number ?? '暂无' }}</span>
            </div>
            @if($order->shipped_at)
            <div class="info-row">
                <span class="info-label">发货时间:</span>
                <span class="info-value">{{ $order->shipped_at->format('Y-m-d H:i:s') }}</span>
            </div>
            @endif
        </div>
        @endif
    </div>

    <!-- 扫描器模态框 -->
    <div id="scannerModal" class="scanner-container">
        <div class="scanner-content">
            <div class="scanner-header">
                <div class="scanner-title">扫描物流单号</div>
                <button class="close-scanner" onclick="closeScanner()">&times;</button>
            </div>
            <div style="position: relative;">
                <video id="scanner-video" autoplay playsinline></video>
                <canvas class="drawingBuffer" id="scanner-canvas" width="640" height="480"></canvas>
                <div class="scan-line"></div>
            </div>
            <div class="scanner-instructions">
                将物流单号条码对准扫描框
            </div>
            <button class="btn-primary" onclick="closeScanner()">取消</button>
        </div>
    </div>

    <!-- 引入 QuaggaJS 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
    <script>
        let currentInputId = null;
        let scannerStream = null;

        function openScanner(inputId) {
            currentInputId = inputId;
            const scannerModal = document.getElementById('scannerModal');
            scannerModal.style.display = 'flex';
            
            // 初始化 QuaggaJS
            Quagga.init({
                inputStream: {
                    name: "Live",
                    type: "LiveStream",
                    target: document.querySelector('#scanner-video'),
                    constraints: {
                        facingMode: "environment" // 使用后置摄像头
                    }
                },
                decoder: {
                    readers: [
                        "code_128_reader",
                        "ean_reader",
                        "ean_8_reader",
                        "code_39_reader",
                        "code_39_vin_reader",
                        "codabar_reader",
                        "upc_reader",
                        "upc_e_reader",
                        "i2of5_reader"
                    ]
                }
            }, function(err) {
                if (err) {
                    console.log(err);
                    alert('初始化扫描器失败: ' + err);
                    closeScanner();
                    return;
                }
                Quagga.start();
            });

            // 监听扫描结果
            Quagga.onDetected(function(data) {
                if (currentInputId) {
                    document.getElementById(currentInputId).value = data.codeResult.code;
                    closeScanner();
                }
            });
        }

        function closeScanner() {
            const scannerModal = document.getElementById('scannerModal');
            scannerModal.style.display = 'none';
            
            // 停止 Quagga
            Quagga.stop();
            
            // 停止摄像头
            if (scannerStream) {
                scannerStream.getTracks().forEach(track => track.stop());
                scannerStream = null;
            }
        }

        function confirmShipment() {
            const logisticsCompany = document.getElementById('logistics_company').value;
            const trackingNumber = document.getElementById('tracking_number').value;
            
            if (!logisticsCompany || !trackingNumber) {
                alert('请填写完整的物流信息');
                return;
            }
            
            if (confirm('确认发货信息无误吗？\n物流公司：' + logisticsCompany + '\n物流单号：' + trackingNumber)) {
                // 提交表单
                document.getElementById('logisticsForm').submit();
            }
        }
    </script>
</body>

</html>